<template>
    <!-- 考试基础信息 -->
    <el-row class="exam-paper-info-form" type="flex" justify="center">
        <el-col>
            <el-form label-width="150px" :model="baseInfoForm" :rules="baseInfoFormRules" ref="baseInfoForm" @submit.native.prevent>
                <el-form-item label="名称：" prop='name'>
                    <el-input v-model="baseInfoForm.name" auto-complete="off" placeholder="请输入考试名称"></el-input>
                </el-form-item>
                <el-form-item label="试卷：" prop='paperId'>
                    <el-select filterable v-model="baseInfoForm.paperId" placeholder="请选择试卷">
                        <el-option
                            v-for="item in examPaperOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="答题限时：" prop='timeLimit'>
                    <el-input-number v-model="baseInfoForm.timeLimit" controls-position="right" :min="1" ></el-input-number>分钟
                </el-form-item>
                <el-form-item label="考试有效期：" prop='time'>
                    <el-date-picker
                        v-model="baseInfoForm.time"
                        type="datetimerange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <p class="tips color-2">注意：如果您希望所有考生同一时间考试，则保持考试有效期的间隔时间与考试限时一致即可。</p>
                </el-form-item>
                <el-form-item label="备注：" prop='remark'>
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息，100字以内。"
                        v-model="baseInfoForm.remark"
                        maxlength="100"
                        show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script>
import { getExamPaperList } from '@/api/exam'

export default {
    name: 'ExamPaperBaseInfo',
    props: {
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data() {
        var checkTime = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请设置考试有效期'))
            } else if(new Date(value[0]).getTime() < new Date().getTime()) {
                callback(new Error('有效期开始时间不能小于当前时间点'))
            } else {
                callback()
            }
        }
        return {
            examPaperOptions: [], // 试卷选项
            pickerOptions: {
                disabledDate: (time) => {
                    let nowData = new Date()
                    nowData = new Date(nowData.setDate(nowData.getDate()))
                    // 因为time返回的默认时间是00:00:00 所以加上23:59:59
                    return (time.getTime() + 1000*60*60*23 + 1000*60*59 + 59*1000) < nowData.getTime()
                }
            },
            baseInfoForm: {
                name: '',
                paperId: '', // 试卷id
                timeLimit: 60, // 答题限时 默认60分钟
                time: '', // 考试有效期
                remark: '',
            },
            baseInfoFormRules: {
                name: [
                    { required: true, message: '请输入考试名称', trigger: 'blur' }
                ],
                paperId: [
                    { required: true, message: '请选择试卷', trigger: 'change' }
                ],
                timeLimit: [
                    { required: true, message: '请设置答题限时', trigger: 'change' }
                ],
                time: [
                    { required: true, message: '请设置考试有效期', trigger: 'change' },
                    { validator: checkTime, trigger: 'change' },
                ]
            },
        }
    },
    created() {
        this.getExamPaperData()
        if(this.oldInfo && this.oldInfo.name) {
            let time = []
            this.baseInfoForm.name = this.oldInfo.name
            this.baseInfoForm.paperId = this.oldInfo.paperId
            this.baseInfoForm.timeLimit = this.oldInfo.timeLimit
            this.baseInfoForm.remark = this.oldInfo.remark
            // 如果是编辑
            if(this.oldInfo.id) {
                time.push(this.oldInfo.beginTime)
                time.push(this.oldInfo.endTime)
                this.baseInfoForm.time = time
            }
        }
    },
    methods: {
        // 获取试卷信息
        getExamPaperData() {
            let that = this
            getExamPaperList({
                queryType: 0,
                account: that.$store.state.userinfo.accountName
            }).then(res => {
                if(res.status === 200) {
                    that.examPaperOptions = res.data
                }
            })
        },
        // 获取数据
        getData() {
            let that = this
            let data = {}
            
            // 校验表单
            that.$refs['baseInfoForm'].validate((valid) => {
                if(valid) {
                    data = {
                        name: that.baseInfoForm.name,
                        paperId: that.baseInfoForm.paperId, // 试卷id
                        timeLimit: that.baseInfoForm.timeLimit, // 答题限时
                        beginTime: that.baseInfoForm.time ? that.baseInfoForm.time[0] : '', // 考试有效期开始时间
                        endTime: that.baseInfoForm.time ? that.baseInfoForm.time[1] : '', // 考试有效期结束时间
                        remark: that.baseInfoForm.remark,
                    }
                } else {
                    data = false
                }
            })
            
            return data
        }
    },
}
</script>
<style lang="scss">
.exam-paper-info-form {
    .question-type-list {
        .el-input-number {
            margin-right: 10px;
        }
        .total-score {
            border-top: 1px solid #DCDFE6;
            margin-top: 5px;
            text-align: center;
            .total-score-value {
                margin-left: 10px;
            }
        }
    }
}
</style>